<script lang='ts' setup>
import { appRef } from "@/models/app.ref";
import { NoteInfo, ShowNoteInfo } from "@/models/Note";
import { ref, defineProps, onMounted } from "vue";
import { noteService } from "@/services/note.service";

defineExpose({ init });
const props = defineProps<{ bodyDom: any }>();
const emit = defineEmits(["click"]);

const boxs = ref<ShowNoteInfo[]>([]);

onMounted(() => init());

function init(): void {
  noteService.list().then(() => {
    boxs.value = [];
    const { clientWidth, clientHeight } = props.bodyDom;
    getRandomBox(clientWidth - 100, clientHeight - 200);
  });
}

/** 初始化及定时获取 便签块 */
function getRandomBox(clientWidth: number, clientHeight: number): void {
  for (let i = 0; i < 60; i++) {
    boxs.value.push(appRef.note.getRandomNote(clientWidth, clientHeight));
  }
  setInterval(() => {
    boxs.value.push(appRef.note.getRandomNote(clientWidth, clientHeight));
    if (boxs.value?.length > 100) boxs.value.shift();
    if (Math.random() * 10 > 7) {
      setTimeout(() => {
        boxs.value.push(appRef.note.getRandomNote(clientWidth, clientHeight));
        if (boxs.value?.length > 100) boxs.value.shift();
      }, Math.random() * 10);
    }
  }, Math.random() * 1000 + 1500);
}

function onClick(item: NoteInfo): void {
  emit("click", item);
}
</script>
<template>
  <div class="list">
    <div class="box flex-c animated fadeInUp" v-for="item in boxs" :key="item.uid" @click="onClick(item.note)"
      :style="{ top: item.top, left: item.left, background: item.bgColor }">
      <div class="text ellipsis3">{{ item.note.remark }}</div>
      <div class="flex user">
        <img v-if="item.note.user?.avatar" class="cover" :src="item.note.user?.avatar" alt="">
        <span class="name"> {{ item.note.user?.nick }} </span>
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.list {
  width: 100%;
  flex: 1;
  position: relative;

  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    max-width: 270px;
    padding: 10px 12px;
    border-radius: 7px;
    box-shadow: 0 0 10px #00000048;
    cursor: pointer;

    &:hover {
      box-shadow: 0 0 20px #00000071;
      z-index: 9;
    }

    .text {
      width: 100%;
      line-height: 23px;
      font-size: 20px;
    }

    .user {
      width: 100%;
      margin-top: 10px;
      color: #292929;
      font-size: 14px;

      .cover {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 7px;
      }
    }
  }
}
</style>